<template>
    <div>
        <el-page-header content="添加文化" icon="" title="文化管理" />

        <el-form ref="productFormRef" :model="productForm" :rules="productFormRules" label-width="80px" class="demo-ruleForm"
            status-icon>
            <!-- 用户名 -->
            <el-form-item label="文化名称" prop="title">
                <el-input v-model="productForm.title" />
            </el-form-item>
            <!-- 产品简要描述 -->
            <el-form-item label="文化内容" prop="introduction">
                <el-input v-model="productForm.introduction" type="textarea" />
            </el-form-item>
            <!-- 产品详细描述 -->
            <el-form-item label="详细描述" prop="detail">
                <el-input v-model="productForm.detail" type="textarea" />
            </el-form-item>
            <!-- 产品图片 -->
            <el-form-item label="文化图片" prop="cover">
                <Upload :avatar="productForm.cover" @kerwinchange="handleChange" />
            </el-form-item>
            <!-- 添加用户 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm()">添加文化</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
// 引入接口等等
import { ref, reactive } from 'vue';
import Upload from '@/components/upload/Upload'
import upload from '@/util/upload';
// import router from '@/router';
import { useRouter } from 'vue-router';


const productFormRef = ref()
const productForm = reactive({
    title: "",
    introduction: "",
    detail:"",
    cover:"",
    file: null,
});

// 规则
const productFormRules = reactive({
    title: [
        { required: true, message: '请输入企业文化名称', trigger: 'blur' },
    ],
    introduction: [
        { required: true, message: '请输入企业文化内容', trigger: 'blur' },
    ],
    detail: [
        { required: true, message: '请输入详细描述', trigger: 'blur' },
    ],
    cover: [
        { required: true, message: '请上传企业文化图片', trigger: 'blur' },
    ],
});

// 每次选择完图片之后的回调，
const handleChange = (file) => {
    // console.log(file.raw)
    // console.log(URL.createObjectURL(file.raw))
    productForm.cover = URL.createObjectURL(file);
    productForm.file = file;
};

const router = useRouter()
// 添加按钮校验
const submitForm = ()=>{
    productFormRef.value.validate(async (valid)=>{
        if(valid){
            // 提交数据到后端
            // console.log(productForm)
            await upload("/adminapi/product/add",productForm)
            // // 成功后跳转页面
            router.push(`/product-manage/productlist`)
        }
    })
}
</script>

<!-- 样式配置 -->
<style lang="scss" scoped>
.demo-ruleForm {
    margin-top: 50px;
}
</style>